<template>
  <!-- 用户管理 -->
  <div style="margin: 20px">
    <div style="padding: 10px; ">

      <!--      顶部搜索栏目-->
      <div style="display: flex;justify-content: space-between">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first"/>
        </el-tabs>
        <div>
          <el-date-picker style="margin: 0 5px" v-model="value1" type="daterange" range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"/>
          <el-input class="mainInput" v-model="searchKeyword" @input="handleSearch" placeholder="请输入" clearable
                    style="width: 200px;margin: 0 5px" suffix-icon="el-icon-search" @keyup.enter.native="handleSearch"/>

          <el-button style="margin: 0 5px" @click="handleBatchDelete" icon="el-icon-delete">
            批量删除
          </el-button>
          <el-button class="inBtn" type="primary" @click="dialogFormVisible = true" icon="el-icon-edit-outline">
            导入
          </el-button>
        </div>
      </div>

      <!-- 导入弹窗 -->
      <el-dialog title="导入用户配置" :visible.sync="dialogFormVisible" style="width: 50%; margin: 0 auto !important;">
        <el-form :model="form" label-width="100px">
          <el-form-item label="平台名称">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="平台1" value="platform1"></el-option>
              <el-option label="平台2" value="platform2"></el-option>
              <!-- 更多平台选项 -->
            </el-select>
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input v-model="form.region" placeholder="请输入" style="width: 200px;"></el-input>
          </el-form-item>
          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                     :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                     :limit="3"
                     :on-exceed="handleExceed" :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传Excel，且不超过500kb</div>
          </el-upload>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="dialogFormVisible = false">
            确 定
          </el-button>
        </div>
      </el-dialog>
      <div class="mainTable">

        <el-table v-loading="loading" ref="multipleTable"
                  :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                  style="width: 100%;"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column label="iID" align="center" prop="id" :show-overflow-tooltip="true"/>
          <el-table-column label="账号名称" align="center" prop="userId" :show-overflow-tooltip="true"/>
          <el-table-column label="账号昵称" align="center" prop="userName" :show-overflow-tooltip="true"/>
          <el-table-column label="IP属地" align="center" prop="userNickname" :show-overflow-tooltip="true"/>
          <el-table-column label="关注量" align="center" prop="userIp" :show-overflow-tooltip="true"/>
          <el-table-column label="粉丝量" align="center" prop="userFocusNum" :show-overflow-tooltip="true"/>
          <el-table-column label="家庭住址" align="center" prop="userFansNum" :show-overflow-tooltip="true"/>
          <el-table-column label="住址纬度" align="center" prop="userHomeAddr" :show-overflow-tooltip="true"/>
          <el-table-column label="住址经度" align="center" prop="userHomeLat" :show-overflow-tooltip="true"/>
          <el-table-column label="工作地址" align="center" prop="userHomeLon" :show-overflow-tooltip="true"/>
          <el-table-column label="地址纬度" align="center" prop="userWorkAddr" :show-overflow-tooltip="true"/>
          <el-table-column label="地址经度" align="center" prop="userWorkLat" :show-overflow-tooltip="true"/>
          <el-table-column label="用户平台" align="center" prop="userWorkLon" :show-overflow-tooltip="true"/>
          <el-table-column label="用户类型" align="center" prop="userPlate" :show-overflow-tooltip="true"/>

          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" @click="todetailspage">
                详情
              </el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentPageChange"
                       :current-page="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20, 50, 100]"
                       :total="total"
                       layout="total, sizes, prev, pager, next, jumper" style="margin-top: 20px; text-align: center;">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {list} from "@/api/combatUser/importantUser";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pageNum: 1,
      pageSize: 10,
      // 查询参数
      queryParams: {
        ipaddr: undefined,
        userName: undefined
      },


      value1: "",
      searchText: "",
      searchKeyword: '',
      dialogFormVisible: false,
      dialogVisible: false,
      formLabelWidth: "120px",
      activeName: "first",
      currentPage: 1,
      totalDataCount: 0,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    // 获取用户基本信息
    getList() {
      this.loading = true;
      list(this.queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    todetailspage() {
      this.$router.push("/networkUser/userdetails");
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSelectiselection(val) {
      console.log("选中的行：", val);
    },
    handleSearch() {
      this.filteredTableData = this.list.filter(item => {
        return Object.keys(item).some(key =>
          String(item[key]).toLowerCase().includes(this.searchKeyword.toLowerCase())
        );
      });
      this.totalDataCount = this.filteredTableData.length;
      this.currentPage = 1;
    },
    handleSelectionChange() {
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1;
    },
    handleCurrentPageChange(newPage) {
      this.currentPage = newPage;
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.list.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleBatchDelete() {
      if (this.$refs.multipleTable.selection.length === 0) {
        this.$message({
          message: '请至少选择一个用户进行删除',
          type: 'warning'
        });
        return;
      }

      this.$confirm('确认删除这些用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.list = this.list.filter(item => {
          return !this.$refs.multipleTable.selection.some(row => row.id === item.id);
        });
        this.$refs.multipleTable.clearSelection();
        this.$message({
          message: '批量删除成功',
          type: 'success'
        });
      }).catch(() => {
        this.$message({
          message: '已取消批量删除',
          type: 'info'
        });
      });
    },
  },
  computed: {},
  created() {
    //发送网络请求获取数据
    this.getList();
  }
};
</script>

<style scoped>
.align-right {
  float: right;
}

.dialog-footer {
  text-align: center;
}

.inBtn {
  width: 106px;
  background: linear-gradient(270deg, #2DBFFD 0%, #0E5FFF 100%);
  border-radius: 4px 4px 4px 4px;
}

::v-deep .el-pager li.active {
  background: linear-gradient(270deg, #2DBFFD 0%, #0E5FFF 100%) !important;
}

.mainTable {
  padding: 15px;
  height: 82vh;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
</style>
